import React from 'react';
import { List, Typography, Tooltip } from 'antd';
import { CheckCircleOutlined, CloseCircleOutlined, InfoCircleOutlined, ApartmentOutlined, ApiOutlined } from '@ant-design/icons';
import { SwapOutlined, SaveOutlined, HistoryOutlined } from '@ant-design/icons';

// 定义新的数据结构  
interface ListItem {
    app_name: string;
    alarm_event_alarm_status: number;
    status_alarm_event_result_time: string;
    link_alarm_event_result_status: number;
    disk_alarm_event_result_status: string;
    status_alarm_event_result_status: string;
    status_alarm_event_result: string;
}

// 定义 props 的类型  
interface SmallSizeListProps {
    data: ListItem[];
    chartTitle: string;
}

const AppList: React.FC<SmallSizeListProps> = ({ data, chartTitle }) => {
    const getStatusIcon = (status: number) => {
        switch (status) {
            case 0:
                return <CheckCircleOutlined style={{ color: 'green' }} aria-label="正常状态" />;
            case 1:
                return <CloseCircleOutlined style={{ color: 'red' }} aria-label="异常状态" />;
            default:
                return <InfoCircleOutlined style={{ color: 'blue' }} aria-label="未知状态" />;
        }
    };

    return (
        <div style={{ width: '100%', paddingLeft: "10px" }}>
            <div style={{ display: 'flex', alignItems: 'center', paddingBottom: "10px" }}>
                <Typography.Title level={5} style={{ margin: '0 10px' }}>
                    {chartTitle}
                </Typography.Title>
            </div>
            <div style={{ maxHeight: 300, overflowY: 'auto' }}>
                <List
                    size="small"
                    bordered
                    dataSource={data}
                    renderItem={(item) => (
                        <List.Item style={{ padding: '5px 10px' }}>
                            <div style={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}>
                                <Tooltip title={item.alarm_event_alarm_status || "健康状态"} placement="top">
                                    <span style={{ margin: '0 5px' }}>
                                        {getStatusIcon(item.alarm_event_alarm_status)}
                                    </span>
                                </Tooltip>
                                <Tooltip title="应用名称" placement="top">
                                    <span style={{ margin: '0 5px', flexGrow: 1 }}>
                                        {item.app_name}
                                    </span>
                                </Tooltip>
                                <Tooltip title="连接数" placement="top">
                                    <span style={{ margin: '0 10px', flexGrow: 1 }}>
                                        <SwapOutlined aria-label="连接数图标" />
                                        {item.link_alarm_event_result_status}
                                    </span>
                                </Tooltip>
                                <Tooltip title="存储大小" placement="top">
                                    <span style={{ margin: '0 10px', flexGrow: 1 }}>
                                        <SaveOutlined aria-label="存储大小图标" />
                                        {item.disk_alarm_event_result_status}
                                    </span>
                                </Tooltip>
                                <Tooltip title="负载" placement="top">
                                    <span style={{ margin: '0 10px', flexGrow: 1 }}>
                                        <ApartmentOutlined aria-label="负载图标" />
                                        {item.status_alarm_event_result}
                                    </span>
                                </Tooltip>
                                <Tooltip title="运行状态" placement="top">
                                    <span style={{ margin: '0 20px', flexGrow: 1 }}>
                                        <ApiOutlined aria-label="运行状态图标" />
                                        {item.status_alarm_event_result_status}
                                    </span>
                                </Tooltip>
                                <Tooltip title="启动时间" placement="top">
                                    <span>
                                        <HistoryOutlined aria-label="启动时间图标" />
                                        {new Date(item.status_alarm_event_result_time).toLocaleString() || "无效时间"}
                                    </span>
                                </Tooltip>
                            </div>
                        </List.Item>
                    )}
                />
            </div>
        </div>
    );
};

export default AppList;